<template>
  <s-layout class="set-wrap" title="成交趋势" :bgStyle="template.style?.background">
    <view class="officer">
      <view class="statistics ss-flex ss-col-center ss-row-between">
        <view class="statistics-l">
          <view class="ss-flex ss-col-center ss-col-center">
            <image class="statistics-l-img" src="@/static/img/icon-transaction.png"></image>
            <view>最新成交价</view>
          </view>
          <view>￥303.8</view>
        </view>
        <view class="statistics-r ss-flex ss-col-center ">
          <view  class="ss-m-r-64">
            <view class="ss-m-b-32">
              <view class="text-1">今日最高</view>
              <view class="text-2">￥305</view>
            </view>
            <view>
              <view class="text-1">今日最高</view>
              <view class="text-4">￥302</view>
            </view>
          </view>
          <view>
            <view class="ss-m-b-32">
              <view class="text-1">今日成交量</view>
              <view class="text-5">8</view>
            </view>
            <view>
              <view class="text-1">地板价</view>
              <view class="text-5">￥140</view>
            </view>
          </view>
        </view>
      </view>
      <view class="title">
        流转记录
      </view>
      <view class="item" v-for="item in list">
        <view class="item-t ss-flex">汽车轮胎
          <text>141590/200000</text>
        </view>
        <view class="item-b ss-flex ss-col-center ss-row-between">
          <view class="text-1">成交时间：2024-04-21 12:48:22</view>
          <view class="text-2">￥303.8</view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import sheep from '@/sheep';

  const list = ref([
    { text: '汽车轮胎', path: '/pages/inherit/officialDetail' },
    { text: '首发专题详情', path: '/pages/inherit/topicDetails' },
    { text: '市场详情', path: '/pages/inherit/marketDetails' },
    { text: '品牌孵化详情', path: '/pages/inherit/brandIncubationDetails' },
    { text: '整车', path: '/pages/inherit/vehicle' },
  ]);

  const template = computed(() => sheep.$store('app').template?.home);
</script>

<style lang="scss" scoped>
  .officer {
    padding: 15px;
    box-sizing: border-box;
  }

  .statistics {
    padding: 20px 30px 20px 22px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 10px;
    background: #1E1E1E;
    margin: 0 auto;

    .statistics-l {
      .ss-flex {
        font-weight: 300;
        font-size: 12px;
        line-height: 12px;
        color: #EEEEEE;
        margin-bottom: 10px;

        .statistics-l-img {
          width: 13.5px;
          height: 11.5px;
          margin-right: 3px;
        }
      }

      font-weight: 400;
      font-size: 19px;
      line-height: 19px;
      color: #FFFFFF;
    }

    .statistics-r {
      .text-1 {
        font-weight: 300;
        font-size: 12px;
        line-height: 12px;
        color: #888888;
        margin-bottom: 6px;
      }

      .text-2 {
        font-weight: 300;
        font-size: 12px;
        line-height: 12px;
        color: #FF0000;
      }

      .text-3 {
        font-weight: 300;
        font-size: 12px;
        line-height: 12px;
        color: #FFFFFF;
      }

      .text-4 {
        font-weight: 300;
        font-size: 12px;
        color: #91FF79;
        line-height: 12px;
      }

      .text-5 {
        font-weight: 300;
        font-size: 12px;
        line-height: 12px;
        color: #FFFFFF;
      }
    }

  }

  .title {
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
    margin: 27px 0 20px;
  }

  .header {
    padding: 0 16px;
    box-sizing: border-box;
    font-weight: 300;
    font-size: 12px;
    color: #767676;
    justify-content: space-between;
    margin-bottom: 15px;

    .header-r {
      view {
        margin-left: 33px;
      }
    }
  }

  .item {
    padding: 14px 0;
    box-sizing: border-box;

    .item-t {
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      margin-bottom: 13px;

      text {
        margin-left: 10px;
        color: #13C093;
      }
    }

    .item-b {
      .text-1 {
        font-weight: 300;
        font-size: 12px;
        color: #888888;
      }

      .text-2 {
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
      }

    }
  }
</style>
